<!--
 * @Author: tangcj 572036028@qq.com
 * @Date: 2024-01-25 10:45:48
 * @LastEditors: tangcj 572036028@qq.com
 * @LastEditTime: 2024-02-01 15:26:35
 * @FilePath: /health-gpt-website/src/views/Home/components/page1.vue
 * @Description: 文件介绍
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <div class="page1">
    <Nav />
    <div class="mainBox">
      <div class="titleBox">
        <div class="leftText">穿越传统思维</div>
        <div class="rightText">重构服务模型</div>
      </div>
    </div>
    <div class="clickBox" @click="nextPage">
      <div class="arrowDown">
        <img src="../../../assets/icon/arrow-down.png" />
      </div>
    </div>
  </div>
</template>
<script>
import Nav from "../../../components/Nav.vue"
export default {
  components: { Nav },
  data () {
    return {

    }
  },
  methods: {
    nextPage () {
      this.$emit('next')
    },
  },
}
</script>
<style scoped lang="less">
.page1 {
  height: 100%;
  width: 100%;
  background: rgb(109, 100, 100);
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url(../../../assets/bgImg/bg1.png);
  background-size: 100% 100%;
  background-attachment: fixed;
  .mainBox {
    width: 1200px;
    height: 100%;
    position: relative;
    display: flex;
    // align-items: center;

    .titleBox {
      width: 485px;
      height: 224px;
      font-size: 60px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      color: #123be7;
      line-height: 94px;

      position: fixed;
      animation: popup 1s ease-in-out;
      animation-fill-mode: forwards;

      @keyframes popup {
        0% {
          top: 60%;
          opacity: 0;
        }
        100% {
          top: calc(50% - 112px);
          opacity: 1;
        }
      }

      .rightText {
        width: 100%;
        text-align: right;
      }
    }
  }
}
</style>